<template>
  <div id="app">
    <!-- 未加载页面&&非iOS -->
    <div v-if="!isIframeLoaded&&!isiOS()" class="fakeloader" />
    <!-- 壳子部署到哪里都无所谓 -->
    <!-- 修改成为vue核心地址 -->
    <!-- 有定位&&非iOS -->
    <iframe v-if="isLocationed&&!isiOS()" :src="`http://116.62.214.202:8081/xcjc/customerIndex?lng=${location.lng}&lat=${location.lat}`" frameborder="0" @load="onload" />
    <!-- 是iOS -->
    <IOSDialog v-if="isiOS()" />

    <!-- 定位子页面 -->
    <!-- <iframe id="locationPlugin" src="https://zglzglzgl.gitee.io/location-plugin/" frameborder="0" /> -->
  </div>
</template>
<script>
import IOSDialog from '@/components/IOS-dialog.vue'
export default {
  components: { IOSDialog },
  data() {
    return {
      isIframeLoaded: false,
      isLocationed: false,
      location: {
        lng: '',
        lat: ''
      }
    }
  },
  watch: {
    // '$route': { //
    //   handler(to, from) {
    //     this.init()
    //   },
    //   immediate: true
    // }
  },
  created() {
  },
  mounted() {
    this.init()
  },
  methods: {
    isiOS() {
      const u = navigator.userAgent
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
      // return isiOS
      // // return true || isiOS
      return false && isiOS
    },
    init() {
      // 显示loading
      this.createLoading()
      // 获取定位
      this.getLocation()
      // window.addEventListener('message', function(e) {
      //   alert('父页面')
      //   alert(JSON.stringify(e.data))
      // }, false)
    },
    // iframe加载完成
    onload() {
      document.querySelector('.fakeloader').style.opacity = 0
      document.querySelector('.fakeloader').style.transform = 'scale(5)'
      window.setTimeout(() => {
        this.isIframeLoaded = true
      }, 1000)
    },
    // 显示loading
    createLoading() {
      // eslint-disable-next-line
      $('.fakeloader').fakeLoader({
        timeToHide: 400000,
        bgColor: '#CC66FF',
        spinner: 'spinner6'
      })
    },
    // 获取定位
    getLocation() {
      // let BMap = window.BMapGL
      // const that = this
      // eslint-disable-next-line
      AMap.plugin('AMap.Geolocation', () => {
        // eslint-disable-next-line
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 是否使用安卓定位sdk用来进行定位，需要安卓端sdk配合
          useNative: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000
        })

        geolocation.getCurrentPosition((status, result) => { // 获取用户当前的精确位置
          // alert(status)
          // alert(JSON.stringify(result))
          this.isLocationed = true
          if (status == 'complete') {
            this.location.lng = result.position.lng
            this.location.lat = result.position.lat
            // alert(JSON.stringify(result.position.lng))
            // alert(JSON.stringify(result.position.lat))
            // alert(JSON.stringify(result.addressComponent.township))
            // alert(JSON.stringify(result.formattedAddress))
            // alert(result.formattedAddress.split(result.addressComponent.township)[1])
            // window.parent.postMessage(JSON.stringify(result), '*')
            // that.showCode = result.adcode.substring(0, 4)
            // if (that.showCode.length === 4) {
            //   this.surePosition(result.position[0], result.position[1])
            // } else {
            //   that.showCity = '未获取定位'
            //   that.getServiceType(0)
            // }
          } else {
            alert('失败')
          }
        })
      })
    }

  }
}
</script>

<style lang="scss">
#app{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  background-size: 100%;
  // padding: 30px 25px;
  box-sizing: border-box;
  .fakeloader{
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
    // transform-origin: center;
  }
  iframe{
    width: 100%;
    height: 100%;
  }
}
</style>
